<template>
    <div class="customer" style="padding: 40px 20px 40px 0">
		<div style="width: 85%;" class="orderListFont">
			<el-row style="margin-bottom: 20px;">
			    <el-col :span="24">
			        <span style="font-size: 18px;margin-left: 10px;">账户管理>服务商品</span>
			    </el-col>
			</el-row>
			<div style="background-color: #FFFFFF;padding-top: 22px;margin-bottom: 20px;">
				<el-row >
				    <el-form :inline="true" :model="formInline" class="demo-form-inline" label-width="140px">
				   
				            <el-form-item label="按代金券名称:">
				                <el-input v-model="formInline.voucherName" style="width: 150px;" :maxlength="50"></el-input>
				            </el-form-item>
				            <el-form-item label="按状态：">
				                <el-select v-model="formInline.voucherStat" style="width: 120px;" >
				                    <el-option label="全部" value=""></el-option>
				                    <el-option :label="item.text" :value="item.value" v-for="item in statList"></el-option>
				                </el-select>
				            </el-form-item>
				            <el-button type="primary" @click="fetchData()">查询</el-button>
							 <el-button type="primary" @click="$router.push('/voucher/voucher_detail/0')">新增</el-button>
				        
				        </el-form>
				</el-row>
			</div>
			
			<el-table
			        :data="pageInfo.dtos"
			        v-loading="table_loading"
			        element-table_loading-text="加载中"
			        tooltip-effect="dark"
			        @sort-change='order'
			        style="width: 100%">
			    <el-table-column
			            type="index"
			            width="80"
			            label="序号">
			    </el-table-column>
			    <el-table-column
			            label="封面">
			            <template scope="scope">
			                <img class="avatar" :src="scope.row.voucherCover" style="width: 55px;height: 55px;border-radius: 0;margin: 5px 0;">
			            </template>
			    </el-table-column>
			    <el-table-column
			            prop="voucherName"
			            label="代金券名称"
						show-overflow-tooltip>
			    </el-table-column>
			    <el-table-column
			            sortable='custom'
			            prop="voucher_Amt"
			            label="价格">
			            <template scope="scope">
			                <span>{{ scope.row.voucherAmt }}</span>
			            </template>
			    </el-table-column>
			    <el-table-column
			            prop="voucherSunNum"
			            label="销量">
			    </el-table-column>
			    <el-table-column
			            prop="voucherNum"
			            label="库存">
			    </el-table-column>
			    <el-table-column
			            sortable='custom'
			            label="有效期"
						show-overflow-tooltip>
			            <template scope="scope">
			                <span>{{ scope.row.voucherStartTime }}-{{ scope.row.voucherEndTime }}</span>
			            </template>
			    </el-table-column>
			    <el-table-column
			            prop="normalState"
			            label="状态"
						width="100">
			            <template scope="scope">
			                <span>{{statList[scope.row.voucherStat].text}}</span>
			            </template>
			    </el-table-column>
			    <el-table-column label="操作" width="140">
			        <template scope="scope">
			            <el-button type="primary" size="small" @click="edit(scope.row)">编辑</el-button>
			            <el-button type="danger" size="small"  v-if="scope.row.voucherStat==1"
			                       @click="handleDelete(scope.row,'禁用')">禁用
			            </el-button>
			            <el-button type="success" size="small" v-else
			                       @click="handleDelete(scope.row,'启用')">启用
			            </el-button> 
			        </template>
			    </el-table-column>
			</el-table>
			<div class="paginate">
			    <el-pagination
			            @current-change="handleCurrentChange"
			            :current-page="pageInfo.pageNum"
			            :page-size="pageInfo.pageSize"
			            layout="total, prev, pager, next, jumper"
			            :total="pageInfo.count">
			    </el-pagination>
			</div>
			
		</div>
       <!-- 编辑会员卡弹框 -->
       <div class="vipAddCard">
       	<el-dialog
       	  title="编辑会员卡"
       	  :visible.sync="editCardDialogVisible"
       	  :before-close="handleClose"
       	  
       	  center="true">
       	   <div style="padding: 20px 40px 0 20px;">
       		   <el-form  :model="formInlineCard"  class="demo-form-inline" label-width="120px">
       						<el-form-item label="卡片售价：">
       							<el-input v-model="formInlineCard.voucherAmt" ></el-input>
       						</el-form-item>
       		   				<el-form-item label="库存数量：">
       		   				  <el-input v-model="formInlineCard.voucherNum" ></el-input>
       		   				</el-form-item>
       		   </el-form>
       	   </div>
       	  <span slot="footer" class="dialog-footer">
       			<el-button type="primary" @click="editCardPrice()">确 定</el-button>
       			<!-- <el-button @click="dialogVisible = false">取 消</el-button> -->
       	  </span>
       	</el-dialog>
       </div>
    </div>

</template>
<style>
 .orderListFont .el-form-item__label{
  	  text-align: right;
  	  font-size: 18px;
  	  font-weight: 500;
  }
  .vipAddCard .el-dialog--small {
  	width: 30%;
  }
</style>
<script>
    export default {
        data() {
            return {
                title: '用户列表',
                table_loading: false,
                formInline: {
                    pageNum:1,
                    sort:'VOUCHER_AMT',
                    desc:'DESC',
                    pageSize:10,
                    storeId:'',
                   
                    voucherName:'',
                    voucherStat:'',
                    storeId:''
                },
				//  voucherType:'1',
                pageInfo: {
                    pageNo: 1,
                    pageSize: 1,
                    count: 1,
                    dtos: []
                },
                formLabelWidth: '120px',
                statList:[{ text: '商家禁用', value: '0' },{ text: '已启用', value: '1' },{ text: '平台禁用', value: '2' }],
				editCardDialogVisible: false,
				formInlineCard: {
					voucherName: '',
					voucherCover: [],
					logo: [],
					balance: '',
					voucherAmt: '',
					voucherNum: '',
					voucherRemark: '',
					voucherUseRule: '',
					voucherStat: '1',
					voucherType: '3',
					rate: '0.08',
					storeId: '',
				},
            }
        },
        created(){
			this.storeId=JSON.parse(sessionStorage.getItem('permission')).storeId
            this.formInline.storeId=this.storeId
            this.fetchData(this.pageInfo.pageNum);
        },
        activated() {
         
            //this.fetchList()
        },
        // watch:{
        //     'formInline.name'(val,oldVal) {
        //         //console.log(val)
        //         this.formInline[this.formInline.type] = this.formInline.name
        //     }
        // },
        methods: {
            fetchData (page = 1) {
                this.table_loading = true;
                this.pageInfo.pageNum = page
                this.formInline.pageNum = this.pageInfo.pageNum
                this.dataApi.ajax('selectPagePayStoreVoucher',this.formInline, res => {
                    this.table_loading = false;
                    if (res.responseType === 'S'){
                        this.pageInfo = res
                    }
                });
            },
            handleCurrentChange(val) {
                this.fetchData(val)
            },
            edit(data){
				if(data.voucherType == '1'){
					 this.$router.push('/serve/combos_detail/' + data.voucherId)
					// this.$router.push('/voucher/voucher_detail/' + data.voucherId)
				}
				if(data.voucherType == '2'){
					this.$router.push('/voucher/combosAdd_detail/' + data.voucherId)
				}
				if(data.voucherType == '3'){
					this.formInlineCard = {
						voucherName: '',
						voucherCover: [],
						logo: [],
						balance: '',
						voucherAmt: '',
						voucherNum: '',
						voucherRemark: '',
						voucherUseRule: '',
						voucherStat: '1',
						storeId: '',
						voucherType: '3',
						rate: '0.08'
					}
					this.formInlineCard = data
					this.editCardDialogVisible = true
				}
                
            },
            selectSort(){
                this.formInline.secondCode=''
                 this.dataApi.ajax('MallGoodClassifyControl/selectListOne',{classifyName:this.formInline.classifyCode}, res => {
                    if (res.responseType === 0) {
                        this.secondList = res.goodsClassifyPojos
                    }
                });
            },
            handleDelete(item,type){
                 if (item.voucherStat==2) {
                    this.showMsg('此商品包含敏感信息,官方平台已下架,请联系平台客服,进行上架操作','warning')
                    return
                }
                var state=''
                state=item.voucherStat==1? 0:1
                this.$confirm('确认'+type+'?', '提示', {
                      confirmButtonText: '确定',
                      cancelButtonText: '取消',
                      type: 'warning'
                    }).then(() => {
                      this.dataApi.ajax('editPayStoreVoucher',{voucherStat:state,voucherId:item.voucherId}, res => {
                            if (res.responseType === 'S') {
                                this.$message({
                                    type: 'success',
                                    message: type+'成功!'
                                });
                                this.fetchData(this.pageInfo.pageNum)
                            }
                        });
                    }).catch(() => {
                              
                    });
            },
            order(column){
                if (!column.order) {
                    return;
                }
                if (column.order=='ascending') {
                     this.formInline.desc='ASC'
                }else{
                    this.formInline.desc='DESC'
                }
                this.formInline.sort=column.prop.toUpperCase()
                this.fetchData(this.pageInfo.pageNum)
            },
			handleClose() {
				this.editCardDialogVisible = false
			},
			editCardPrice() {
				/**
				 * 方法说明
				 * author: liuchen
				 * description: 
				 * @param 编辑会员卡
				 * @return 
				 * @createTime: 2020-8-12 13:18:25
				 */
				this.dataApi.ajax('editPayStoreCard',{voucherNum:this.formInlineCard.voucherNum,voucherId:this.formInlineCard.voucherId,voucherAmt:this.formInlineCard.voucherAmt}, res => {
				      if (res.responseType === 'S') {
				          this.$message({
				              type: 'success',
				              message: '编辑成功!'
				          });
						  this.editCardDialogVisible = false
				          this.fetchData(1);
				      }
				  });
			},
        }
    }
</script>
